# Why doesn't js file work in Google Chrome?
#
# Clicking Serial number link will show ticket history:
# http://localhost/rt/webrt.cgi/webrt.cgi?serial_num=94710&display=History
#
# Clicking email link will enable user to reply to ticket requestor:
# http://localhost/rt/webrt.cgi/webrt.cgi?serial_num=94710&refresh_req=true&transaction=0&display=SetReply;
#
# http://localhost/rt/webrt.cgi/webrt.cgi/webrt.cgi?display=SetStatus&serial_num=94690

# Define a selector for choosing ticket status
$statusSor = $('''
<select name="do_req_status">
<option selected="" value="open">open
</option><option value="stall">stalled
</option><option value="resolve">resolved
</option><option value="kill">dead
</option></select>
'''
).click ->
	return false

# Define useful CSS objects for debugging navigation
markCSS =
	'border-color': 'transparent'
	'border-style': 'solid'
unmarkCSS =
	'border-color': 'none'
	'border-style': 'none'

Deep = true

# Define a regex to match a ticket's serial number
serialNum = /serial_num=(\d+)/

jQuery ($) ->

	# We will try to get webrt's main page from the server.
	# >FIXME We need to provide a load spinner.
	$.get '/rt/webrt.cgi', (data, textStatus, jqXHR) ->

		# The data response is an HTML page.
		# We will use it to replace the starting HTML page.
		# >FIXME Result lacks a body tag
		$('html').html data

		# Every time the user clicks an anchor tag, we need to intercept it and
		# get the href ourself, otherwise, we will lose our Javascript file.
		$('html').on 'click', 'a', ->
			href = $(@).prop 'href'
			$.get href, (data) ->
				$('html').html data
			return false

		# The main page will be divided into several tables representing the major sections:
		#
		# * table header showing ticket properties
		# * table body listing tickets
		# * search form
		# * function bar
		# * footer
		#
		# Let's give an identifier to the sections, so that we will locate them easily.

		# The main table will list one ticket per row. A core set of properties,
		# eg, priority, status, subject, shown for each ticket.
		# The major interactivity of the main table will be that the user should be
		# able to change the value of an property by clicking it to enter an
		# editing mode.

		# Let's adorn each table row with a class name and a serial number.
		$('font >table >tbody >tr').each ->
			$this = $(@)
			href = $('a', $this).attr 'href'
			if sn = (href.match serialNum)?[1]
				$this.addClass('ticket').attr 'id': sn

		# Let's build a mapping from column position to column name by parsing
		# the table header.
		colPosn =
			'status': 3
		
		# Let's get the list of possible status values and queue names by
		# parsing the search form.

		# Let's add tool tips for some columns, so that the user will know what
		# is possible if the column is clicked.  For example, if the user
		# hovers over the status column, the tip should say, 'change to a
		# different status', and so on.

		# Status: If the user mouse-clicks a status element, we will show a
		# selection of status values.  If the user mouses out, we will replace
		# it with the original element.
		statusCol = "tr >td:nth-child(#{colPosn.status})"
		$('font >table >tbody').on 'mousedown', statusCol, ->
			$statusVal = $(@).clone Deep
			$(@).empty().append $statusSor.clone().one 'mouseout', =>
				$(@).replaceWith $statusVal
				return false
			return false
		
		return # from get handler
